import React, { Component } from 'react'
import PropTypes from "prop-types"
import "./index.css"

export default class Item extends Component {

  static propTypes = {
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    checked: PropTypes.bool.isRequired,
    updateTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired
  }

  state = {
    mouse: false
  }

  changeState = (flag) => {
    return () => {
      this.setState({mouse: flag})
    }
  }

  handleChange = (id) => {
    return (e) => {
      this.props.updateTodo(id, e.target.checked)
    }
  }

  handleDelete = (id) => {
    this.props.deleteTodo(id)
  }
  render() {
    let {id, name, checked} = this.props
    return (
      <div className="todo-item" 
        onMouseEnter={this.changeState(true)} 
        onMouseLeave={this.changeState(false)}
        style={{background: this.state.mouse ? 'rgba(0,0,0,0.1)' : ''}}>
        <input defaultChecked={checked} type="checkbox" name="todo-item" onChange={this.handleChange(id)} />
        <div className="name">{name}</div>
        <button className="btn" style={{display: this.state.mouse ? 'block' : 'none'}} onClick={() => this.handleDelete(id)}>删除</button>
      </div>
    )
  }
}
